<template>
  <div class="page-content center-center">
    <div>
      <div class="title-info text-left">
        详细信息
      </div>
      <div class="center-center">
        <el-form class="myForm" :model="modelForm" ref="modelForm" label-width="100px" style="width: 800px;">
          <el-form-item label=" " prop="districtId" :rules="[ { required: true, message: '请选择所属区域', trigger: 'change' }]" >
            <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
              <div class="el-input-group__prepend" tabindex="-1">所属区域</div>
              <el-cascader placeholder="请选择上级机构" class="el-cascader-margin w-100p"  size="medium" :disabled="!isSave"
                           :options="treeData"
                           :show-all-levels="false" v-model="modelForm.districtId"
                           change-on-select>
              </el-cascader>
            </div>
          </el-form-item>
          <el-form-item label=" " prop="name"  :rules="[ { required: true, message: '请输入门店名称', trigger: 'blur' }]">
            <el-input placeholder="请输入门店名称" v-model="modelForm.name" auto-complete="off" :maxlength="30" size="medium" >
              <template slot="prepend">
                <el-tooltip placement="top" content="请输入门店名称">
                  <el-button tabIndex="-1">门店名称</el-button>
                </el-tooltip>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label=" " prop="industry" :rules="[{ required: true, message: '请选择所属业态', trigger: 'change' }]">
            <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
              <div class="el-input-group__prepend" tabindex="-1">所属业态</div>
              <el-select :disabled="isUpdate" class="el-cascader-margin w-100p" v-model="modelForm.industry" placeholder="请选择所属业态">
                <el-option
                  v-for="item in yetaiList"
                  :key="item.name"
                  :label="item.name"
                  size="medium"
                  :value="item.name">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label=" ">
            <div class="el-from-item_title">门店属性</div>
            <div class="el-from-item_content text-left" style="margin-left:80px">
              <el-radio-group v-model="modelForm.propType" @change="changeData">
                <el-radio :label="i.key" :value="i.text" v-for="i in propTypes">{{i.text}}</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>

          <el-form-item label=" " prop="linker"  :rules="[ { required: true, message: '请输入联系人', trigger: 'blur' }]">
            <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
              <el-input placeholder="请输入联系人" v-model="modelForm.linker" auto-complete="off" size="medium" >
                <template slot="prepend">
                  <el-tooltip placement="top" content="请输入联系人">
                    <el-button tabIndex="-1">联系人</el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label=" " prop="phone"  :rules="[ { required: true, message: '请输入手机号', trigger: 'blur' },rules.phone]">
            <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
              <el-input placeholder="请输入手机号" v-model="modelForm.phone" auto-complete="off" size="medium" >
                <template slot="prepend">
                  <el-tooltip placement="top" content="请输入手机号">
                    <el-button tabIndex="-1">手机号</el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label=" " prop="telephone" >
            <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
              <el-input placeholder="请输入联系电话" v-model="modelForm.telephone" auto-complete="off" :maxlength="20" size="medium" >
                <template slot="prepend">
                  <el-tooltip placement="top" content="请输入联系电话">
                    <el-button tabIndex="-1">联系电话</el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label=" " prop=""  :rules="[{ required: true, message: '请选择城市区域' }]">
            <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
              <div class="el-input-group__prepend" tabindex="-1">城市区域</div><!--v-model="selectedOptions"-->
              <el-cascader
                class="el-cascader-margin w-100p"
                size="medium"
                :options="options1"
                v-model="selectedOptions"
                @change="handleChange"
                :change-on-select="true">
              </el-cascader>
            </div>
          </el-form-item>
          <el-form-item label=" " prop="address">
            <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
              <el-input placeholder="请输入详细地址" v-model="modelForm.address" auto-complete="off" size="medium" >
                <template slot="prepend">
                  <el-tooltip placement="top" content="请输入详细地址">
                    <el-button tabIndex="-1">详细地址</el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </div>
          </el-form-item>

          <div class="title-info text-left">
            店铺管理员账号
          </div>
          <el-form-item v-if="modelForm.id==null" label=" " prop="regCode" :rules="[{ required: true, message: '请输入注册码', trigger: 'blur' }]">
            <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
              <el-input placeholder="请输入注册码" v-model="modelForm.regCode" auto-complete="off" size="medium" >
                <template slot="prepend">
                  <el-tooltip placement="top" content="请输入注册码">
                    <el-button tabIndex="-1">注册码</el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </div>
          </el-form-item>

          <el-form-item label=" " prop="username"  :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' }]">
            <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
              <el-input placeholder="请输入用户名" :disabled="modelForm.id!=null" v-model="modelForm.username" auto-complete="off" size="medium" >
                <template slot="prepend">
                  <el-tooltip placement="top" content="请输入用户名">
                    <el-button tabIndex="-1">用户名</el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label=" " prop="password" :rules="[{ required: true, validator: validatePass, trigger: 'blur' }]">
            <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
              <el-input type="password" placeholder="请输入密码" v-model="modelForm.password" auto-complete="off" size="medium" >
                <template slot="prepend">
                  <el-tooltip placement="top" content="请输入密码">
                    <el-button tabIndex="-1">密码</el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label=" " prop="passwordConfirm"  :rules="[{validator: validatePass2, trigger: 'blur' }]">
            <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
              <el-input type="password" placeholder="请输入确认密码" v-model="modelForm.passwordConfirm" auto-complete="off" size="medium" >
                <template slot="prepend">
                  <el-tooltip placement="top" content="请输入确认密码">
                    <el-button tabIndex="-1">确认密码</el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label=" " prop="templateId" :rules="[ { required: true, message: '请选择角色', trigger: 'change' }]">
            <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
              <div class="el-input-group__prepend" tabindex="-1">管理员角色</div>
              <el-select class="el-cascader-margin w-100p" v-model="modelForm.templateId" placeholder="请选择角色">
                <el-option
                  v-for="item in roleList"
                  :key="item.id"
                  :label="item.name"
                  size="medium"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <!--<div class="text-left" style="font-size:13px;color:#ccc">(注:可以在权限模板页面修改或者新增权限模板)</div>-->
          </el-form-item>

        </el-form>
      </div>

      <br>
      <div class="text-left" style="margin-left:142px">
        <el-button :disabled="canSave" type="primary" size="medium" @click="submitForm('modelForm')">
          <span v-if="canSave"><i class="el-icon-loading"></i>提交中</span>
          <span v-else>提交</span>
        </el-button>
        <!--<el-button type="primary" @click="submitForm('modelForm')">提交</el-button>-->
        <el-button @click="goBack">返回</el-button>
      </div>
      <br>
      <br>
    </div>
  </div>
</template>
<script>
  //注意路径
  import { regionDataPlus,CodeToText,TextToCode} from 'element-china-area-data'
  export default {
    data() {
      return {
        canSave:false,
        roleList:[],
        options1: regionDataPlus,
        selectedOptions: [],
        propTypes:[],
        yetaiList:[
//          {name:"火锅"},
//          {name:"中餐"},
//          {name:"西餐"}
        ],
        modelForm: {
          password:'',
          address:'',
          phone:'',
          username:'',
          templateId:'',
          propType:'',
        },
        showDialog: false,
        options:[],
        activityId: "",
        isSave: true,
        downCategeryId: [],
        isUpdate: false,
        treeData: [],
        radio: "",
        city: [],
      }
    },
    created() {
      window.this = this;
      if (this.$route.query.id && this.$route.query.id != '') {
        this.activityId =this.$route.query.id;
        this.isSave = false;
        this.isUpdate = true;
        this.modelForm={};
        this.selectedOptions=[];
        this.canSave=false;
        this.$axios.get("organization/branchs/" + this.activityId + "/update").then(data => {
            console.log(data);
            this.modelForm = data.content.branch;
            var dataValue = data.content;
            this.yetaiList = dataValue.industries;
            var districtId = [];
            if (data.content.branch.districtName ) {
              districtId.push(data.content.branch.districtName + '');
            }
            districtId.push(data.content.branch.districtId + '');
            this.modelForm.districtId=districtId
            var tree = dataValue.districtList;
            this.newLabel(tree);
            this.treeData = tree;
            this.propTypes=dataValue.propTypes;
//              this.templateList=dataValue.templateList;
            this.roleList=dataValue.roleList;

            if(data.content.branch.location==','){
              this.selectedOptions.push("");
            }else {
              var list=data.content.branch.location.split(",");
              if(list.length==1){
                this.selectedOptions.push(TextToCode[list[0]].code);
              }else if(list.length==2){
                this.selectedOptions.push(TextToCode[list[0]].code);
                this.selectedOptions.push(TextToCode[list[0]][list[1]].code);
              }else if(list.length==3){
                this.selectedOptions.push(TextToCode[list[0]].code);
                this.selectedOptions.push(TextToCode[list[0]][list[1]].code);
                this.selectedOptions.push(TextToCode[list[0]][list[1]][list[2]].code);
              }
            }



          });
      }else {
        this.isSave = true;
        this.isUpdate = false;
        this.$axios.get("organization/branchs/create").then(data => {
           this.modelForm = data.content.branch;
          this.selectedOptions=[];
          var dataValue = data.content;
          var tree = dataValue.districtList;
          this.newLabel(tree);
          this.treeData = tree;
          this.propTypes=dataValue.propTypes;
//            this.templateList=dataValue.templateList;
          this.roleList=dataValue.roleList;
          this.yetaiList = dataValue.industries;
          this.changeData();

        });
      }


    },
    mounted() {
    },

    methods: {
      validatePass (rule, value, callback) {

        if(!this.isUpdate){
          if (value === '') {
            callback(new Error('请输入密码'));
          }

        }
        /* else {
            if (this.modelForm.password !== '') {
                this.$refs.modelForm.validateField('password');

            }
        }*/
        callback();

      },
      validatePass2 (rule, value, callback)  {
        if(!this.isUpdate){
          if (value === '') {
            callback(new Error('请再次输入密码'));
          }
        }
        if (value !== this.modelForm.password ) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      },
      changeData(){
        /*for(var i=0;i<this.templateList.length;i++){
          if(this.templateList[i].name.indexOf('直营店模板')==0 && this.modelForm.propType=='DIRECT'){
              this.modelForm.templateId=this.templateList[i].id;
                /!*this.modelForm.propType=='DIRECT'*!/
          }else if(this.templateList[i].name.indexOf('加盟店模板')==0 && this.modelForm.propType=='LEAGUE'){
            this.modelForm.templateId=this.templateList[i].id;
          }
        }*/

      },
      handleChange (arr) {
        if(arr && arr.length>0){
//          console.log(arr);
          if(arr[0]==""){
            this.modelForm.location=",";
          }else {
            if(arr.length==3){
              this.modelForm.location=CodeToText[arr[0]]+","+CodeToText[arr[1]]+","+CodeToText[arr[2]];
            }else if(arr.length==2){
              this.modelForm.location=CodeToText[arr[0]]+","+CodeToText[arr[1]];
            }else if(arr.length==1){
              this.modelForm.location=CodeToText[arr[0]];
            }
          }
        }
//        this.modelForm.location=CodeToText[arr[0]]+","+CodeToText[arr[1]]+","+CodeToText[arr[2]];
      },
      newLabel(newList) {
        if (newList) {
          for (var i = 0; i < newList.length; i++) {
            newList[i].label = newList[i].name;
            newList[i].value = newList[i].id + "";
            if (!newList[i].children || newList[i].children.length == 0) {
              newList[i].children = null;
            } else {
              for (var s = 0; s < newList[i].children.length; s++) {
                newList[i].children[s].label = newList[i].children[s].name;
                newList[i].children[s].value = newList[i].children[s].id + "";
                newList[i].children[s].children = null;
              }
            }
          }
        }
      },
      goBack() {
        this.router.go(-1);
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            var districtId = this.modelForm.districtId;
            if(districtId && districtId.length>0){
              this.modelForm.districtId=[];
              this.modelForm.districtId.push(districtId[districtId.length-1]);
            }
            if(this.canSave){
              return;
            }
            this.canSave=true;
            if (this.isSave) {
              this.$axios
                .post("organization/branchs/create", this.modelForm,"",true)
                .then(data => {
                  this.canSave=false;
                  if (data.status == 200) {
                    this.$message({
                      message: data.message,
                      type: "success"
                    });
                    this.$emit("addSuccess");
                    this.router.push({ path: "/shopsManagement/dataTable" });
                  } else {
                    this.$message.error(data.message);
                  }
                });
            } else {
              this.modelForm._method = "PUT";
              this.$axios.put("organization/branchs/" + this.activityId + "/update",this.modelForm,"",true)
                .then(data => {
                  this.canSave=false;
                  if (data.status == 200) {
                    this.$message({
                      message: data.message,
                      type: "success"
                    });
                    this.$emit("addSuccess");
                    this.router.push({ path: "/shopsManagement/dataTable" });
                  } else {
                    this.$message.error(data.message);
                  }
                });
            }
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$emit("close");
        this.showDialog = false;
      },
      handleClose(done) {
        this.$emit("close");
        done();
      },
      isNum(item, key) {
        var r = /^\+?[1-9][0-9]*$/;
        if (!r.test(item[key])) {
          item[key] = "0.00";
        } else {
          item[key] = item[key];
        }
      },
      isDouble(item, key) {
        var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
        if (!isNum.test(item[key])) {
          item[key] = "0.00";
        } else {
          item[key] = item[key];
        }
      }
    }

  }
</script>
<style scoped>
  .el-from-item_title {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #48576a;
    line-height: 1;
    padding: 11px 12px 11px 0;
    box-sizing: border-box;
  }
  .el-from-item_content {
    line-height: 36px;
    position: relative;
    font-size: 15px;
  }

  .el-form-item {
    margin-bottom: 10px !important;
  }

  .el-table tr {
    border-bottom: 1px solid #dfe6ec !important;
  }

  .text-left5 {
    display: none;
  }

  .title-info {
    background-color: #F8F8F8;
    border: 1px solid #e4e4e4;
    /*color: #23c6c8;*/
    font-weight: bold;
    padding: 10px;
    margin-bottom: 20px;
    /*width: 800px;*/
  }

  .myForm .el-form-item {
    margin-bottom: 20px !important;
    margin-left: -70px !important;
  }

  .deco {
    color: #409EFF !important;
    text-decoration: underline !important;
  }
</style>
